<template>
    <div class="panel-body">
        <div>
            <h2>Home组件内容</h2>
            <div>
                <ul class="nav nav-tabs">
                    <li>
<!--                        <a class="list-group-item active" href="./home-news.html">News</a>-->
                        <router-link to="/home/news" class="list-group-item " active-class="active">News</router-link>
                    </li>
                    <li>
<!--                        <a class="list-group-item " href="./home-message.html">Message</a>-->
                        <router-link to="/home/message" class="list-group-item " active-class="active">Message</router-link>
                    </li>
                </ul>
                <!-- 第一种写法 include="组件名" -->
<!--                <keep-alive include="News">-->

                <!-- 第二种写法 :include= -->
                <keep-alive :include="['News','Message']">
                    <router-view></router-view>
                </keep-alive>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "Home",
    data() {
        return {}
    },
    methods: {},
    computed: {},
    destroyed(){
        console.log('home 组件将被销毁');
    },
    mounted(){
        console.log('home 组件将挂载',this);
        console.log();
    }
}
</script>

<style>
</style>
